import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { LikeOutlined, CommentOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { Spin, Popconfirm, message } from 'antd'
import { _delete } from '@/utils/requestUtil'
import './index.css'

class IndividualBlogCard extends Component {
    constructor(props) {
        super(props)
        this.state = {
            blog: null,
            loading: true
        }
    }

    async componentDidMount() {
        const { blog } = this.props
        //处理过长的内容，保留300字符
        let newBlogText = blog.blogText
        if (blog && blog.blogText.length > 300) {
            newBlogText = newBlogText.substring(0, 300) + '...'
        }
        await new Promise((resolve) => {
            this.setState({
                blog: {
                    ...blog,
                    blogText: newBlogText
                }
            }, resolve)
        })

        if (blog) await new Promise((resolve) => { this.setState({ loading: false }, resolve) })
    }

    render() {
        if (this.state.loading === true) return <Spin />
        const { blog } = this.state
        return (
            <div className='IndividualBlogCard-main' style={this.props.style}>
                <div className='IndividualBlogCard-title'>
                    <Link to={`/${blog.customerId}/blog/${blog.id}`}>{blog.blogTitle}</Link>
                </div>
                <div className='IndividualBlogCard-content'>
                    <p className='IndividualBlogCard-content-text'>
                        {blog.blogText}
                    </p>
                </div>
                <div className='IndividualBlogCard-footer'>
                    <div>{blog.createTime}</div>
                    <div className='IndividualBlogCard-footer-date'><Link><EyeOutlined /> {blog.views}</Link></div>
                    <div className='IndividualBlogCard-footer-date'><Link><LikeOutlined /> {blog.agree}</Link></div>
                    <div className='IndividualBlogCard-footer-date'><Link><CommentOutlined /> {blog.remarks}</Link></div>
                    <div className='IndividualBlogCard-footer-date'>{blog.state}</div>
                    {
                        this.props.user.id === this.state.blog.customerId ?
                            <div className='IndividualBlogCard-footer-edit'><Link to={`/write/blog/${blog.id}`}><EditOutlined />编辑</Link></div> : ''
                    }
                    {
                        this.props.user.id === this.state.blog.customerId ?
                            <div className='IndividualBlogCard-footer-delete'>
                                <Link>
                                    <Popconfirm
                                        title={`删除[${blog.blogTitle}]`}
                                        description='确定要删除此篇博客吗？删除后30日内可在回收站中恢复'
                                        onConfirm={async () => {
                                            const response = await _delete(`/blog/delete/${blog.id}`)
                                            if (response && response.code === 200) {
                                                message.success("删除成功")
                                                await this.props.deleteBlogCallBack()
                                            } else {
                                                message.warning("删除失败，请联系管理员")
                                            }
                                        }}
                                        okText='确定'
                                        cancelText='取消'
                                    ><DeleteOutlined />删除</Popconfirm>
                                </Link>
                            </div> : ''
                    }
                </div>
            </div>
        )
    }
}

export default IndividualBlogCard